<template>
  <div class="app-container">
    <div class="OrderSummaryContainer">
      <div class="search">
        <img class="searchImg" src="./image/search.png" alt="" />
        <span class="searchText">筛选查询</span>
      </div>
      <!-- 查询表单 -->
      <div class="form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input clearable class="w-50 m-2 inputBase" size="large" placeholder="请输入指令" />
          </el-form-item>

          <el-form-item>
            <el-select v-model="type" filterable placeholder="品牌" class="inputBase">
              <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input clearable class="w-50 m-2 inputBase" size="large" placeholder="请输入货号" />
          </el-form-item>

          <el-form-item>
            <el-select v-model="season" filterable placeholder="样品类型" class="inputBase">
              <el-option v-for="item in seasons" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="brand" filterable placeholder="厂商" class="inputBase">
              <el-option v-for="item in brands" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="客户交期" class="date">
            <el-date-picker v-model="deliveryTime" type="daterange" range-separator="-" start-placeholder="2023-06-07" end-placeholder="2023-06-07" />
          </el-form-item>

          <el-form-item label="完成日期" class="date">
            <el-date-picker v-model="OrderDate" type="daterange" range-separator="-" start-placeholder="2023-06-07" end-placeholder="2023-06-07" />
          </el-form-item>

          <el-form-item>
            <el-select v-model="brand" filterable placeholder="生产员工" class="inputBase">
              <el-option v-for="item in brands" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!-- 查询单选框 -->
      <div class="checkbox">
        <el-button type="primary" size="small" @click="">查询</el-button>
        <el-button type="primary" size="small" @click="">清空</el-button>
        <el-button type="primary" size="small" @click="">导出</el-button>
      </div>
      <!-- 数据列表 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>针车完工扫描记录</span>
          </div>
        </template>
        <div class="table">
          <el-table :data="tableData" stripe style="width: 100%; height: 100%" ref="table" height="480" highlight-current-row>
            <el-table-column prop="date" label="采集类型" show-overflow-tooltip />
            <el-table-column prop="name" label="指令号" show-overflow-tooltip />
            <el-table-column prop="address" label="品牌" show-overflow-tooltip />
            <el-table-column prop="date" label="工厂货号" show-overflow-tooltip />
            <el-table-column prop="date" label="颜色" show-overflow-tooltip />
            <el-table-column prop="date" label="号码" show-overflow-tooltip />
            <el-table-column prop="date" label="订单数量" show-overflow-tooltip />
            <el-table-column prop="date" label="客户交期" show-overflow-tooltip />
            <el-table-column prop="date" label="生产员工" show-overflow-tooltip />
            <el-table-column prop="date" label="厂商&责任单位" show-overflow-tooltip />
            <el-table-column prop="date" label="备注&补单原因" show-overflow-tooltip />
            <el-table-column prop="date" label="扫描时间" show-overflow-tooltip />
          </el-table>
        </div>
        <!-- 分页器 -->
        <div class="bottom">
          <span class="total">共{{ total }}项数据</span>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <div>
            <el-button class="save" type="primary" size="default" @click="">保存</el-button>
            <el-button type="primary" size="default" @click="">打印</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { reactive, ref } from 'vue'
import 'dayjs/locale/zh-cn'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'NeedleOutpu'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formInline = reactive({
  user: '',
  region: ''
})
const type = ref('')
const types = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]

const brand = ref('')
const brands = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]

const season = ref('')
const seasons = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]

const deliveryTime = ref('')
const OrderDate = ref('')
const shippingDate = ref('')
// 表格数据
const tableData = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]
const checked1 = ref(true)
const checked2 = ref(false)
const checked3 = ref(false)

// 分页器
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(658)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style lang="less" scoped>
.OrderSummaryContainer {
  height: 100%;

  // 筛选查询行
  .search {
    height: 20px;
    line-height: 20px;
    display: flex;
    align-items: center;

    .searchImg {
      width: 20px;
      height: 20px;
    }

    .searchText {
      font-size: 14px;
      font-family: PingFangSC-Medium-, PingFangSC-Medium;
      color: #666666;
      margin-left: 8px;
    }
  }

  // 搜索行
  .form {
    margin-top: 10px;

    .el-form {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      height: 32px;
    }

    .inputBase {
      width: 128px;
      height: 32px;
    }

    :deep(.el-range__icon) {
      position: absolute;
      right: 6px;
      color: #f89027 !important;
    }

    :deep(.el-range__close-icon) {
      position: absolute;
      left: 5px;
    }

    .date {
      width: 320px;
    }

    .el-form-item:last-child {
      margin-right: 0;
    }

    .el-form-item {
      margin-right: 19px;

      .w-50 {
        width: 180px;
      }
    }

    .el-range__icon {
      display: none;
    }

    :deep(.el-range-input) {
      width: 110px;
    }

    :deep(.el-range-editor.el-input__wrapper) {
      padding: 0;
      padding-right: 10px;
    }

    :deep(.el-input__inner) {
      text-align: center;
    }
  }

  // 单选行
  .checkbox {
    display: flex;
    justify-content: left;
    height: 65px;
    align-items: center;

    .el-checkbox {
      margin-right: 15px;
    }

    :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
      color: black;
    }
  }

  // 卡片头部
  :deep(.el-card__header) {
    border-bottom: none;
    padding-bottom: 0;
    font-family: Segoe UI-Semibold, Segoe UI;
    font-weight: 600;
    font-size: 20px;
  }

  :deep(.el-card__body) {
    padding-top: 10px;
  }

  // 表格
  .table {
    padding-top: 6px;

    :deep(.cell) {
      text-align: center;
    }

    :deep(.el-table__inner-wrapper) {
      color: #191919;
    }

    // 表头改变颜色
    :deep(.el-table th.el-table__cell) {
      background: #f6f6f6;
      color: #191919;
    }

    // 斑马条纹颜色
    :deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
      background: #f6f6f6;
    }

    /* 非斑马纹颜色 */
    :deep(.el-table tr) {
      background: #fff5eb;
    }
  }

  // 底部
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;

    .total {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.6);
      font-family: PingFangSC-Regular-, PingFangSC-Regular;
    }

    :deep(.el-input__wrapper) {
      padding: 0;
    }

    :deep(.el-input__suffix) {
      transform: translateX(-9px);
    }

    :deep(.el-pagination .el-select .el-input) {
      width: 88px;
    }

    :deep(.number) {
      border: 1px solid #dcdcdc;
      margin-right: 8px;
      border-radius: 3px 3px 3px 3px;
    }

    :deep(.is-active.number) {
      background-color: #f89027 !important;
      color: white;
      border-radius: 3px 3px 3px 3px;
    }

    .save {
      color: black;
      border: 1px solid #e7e7e7;
      background: #e7e7e7;
    }
  }
}
</style>
